<template>
  <view class="joinexamination">
    <view class="head" v-show="isShow == 1">
      <u-navbar
        leftText="返回"
        title="视频教程"
        @leftClick="back"
        @rightClick="switchover"
      >
        <view class="u-nav-slot" slot="left">
          <u-icon name="arrow-left" size="19"></u-icon>
        </view>
        <view class="u-nav-slot" slot="right">
          <view class="img">
            <image src="../../static/operation/sousuo.png" mode=""></image>
          </view>
        </view>
      </u-navbar>
    </view>
    <view class="head" v-show="isShow == 2">
      <u-navbar @rightClick="cancel">
        <view class="u-nav-slot" slot="left">
          <view class="input">
            <u--input
              placeholder="搜索"
              border="surround"
              prefixIcon="search"
              v-model="value"
              @change="change"
              style="background-color: #f6f6f6; border-radius: 30rpx"
            ></u--input>
          </view>
        </view>
        <view class="u-nav-slot" slot="right">
          <view class="cancel">
            <text>取消</text>
          </view>
        </view>
      </u-navbar>
    </view>
    <view class="content">
      <view
        @click="study"
        class="content-topic"
        v-for="item in list"
        :key="item.id"
      >
        <view class="img">
          <image :src="item.url" mode=""></image>
        </view>
        <view class="title">
          <text>{{ item.title }}</text>
        </view>
        <text class="p">{{ item.remark }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "空气呼吸器培训",
          remark: "公司级安全教育",
          url: "../../static/operation/zt.png",
        },
        {
          id: 2,
          title: "空气呼吸器培训",
          remark: "公司级安全教育",
          url: "../../static/operation/zt.png",
        },
        {
          id: 3,
          title: "空气呼吸器培训",
          remark: "公司级安全教育",
          url: "../../static/operation/zt.png",
        },
        {
          id: 4,
          title: "空气呼吸器培训",
          remark: "公司级安全教育",
          url: "../../static/operation/zt.png",
        },
      ],
      isShow: 1,
      value: "",
    };
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    switchover() {
      this.isShow = 2;
    },
    cancel() {
      this.isShow = 1;
    },
    change(e) {
    },
    study() {
      uni.navigateTo({
        url: "/pages/bestudying/bestudying",
      });
    },
  },
};
</script>

<style lang="scss">
.joinexamination {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  .head {
    height: 100rpx;
    background-color: #fff;
    .u-count-down {
      color: #1989fa !important;
    }
    .input {
      margin-left: 40rpx;
      width: 547rpx;
      height: 60rpx;
      border-radius: 30rpx;
      /deep/.u--input {
        width: 547rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #f6f6f6;
      }
    }
    .img {
      width: 36rpx;
      height: 36rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .cancel {
      margin-right: 40rpx;
      font-size: 28rpx;
      color: #666666;
    }
  }
  .content {
    width: 100%;
    padding: 40rpx 24rpx 60rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .content-topic {
      width: 339rpx;
      height: 477rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 40rpx;
      .img {
        width: 339rpx;
        height: 375rpx;
        background-color: #1989fa;
        border-top-left-radius: 12rpx;
        border-top-right-radius: 12rpx;
        background: url("@/static/operation/shipin.png") no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 88rpx;
          height: 88rpx;
        }
      }
      .title {
        margin-top: 19rpx;
        color: #333333;
        font-size: 28rpx;
      }
      .p {
        color: #999999;
        font-size: 22rpx;
      }
    }
  }
}
</style>
